<!--
 * @Author: zhouhua zhouh@hsmap.com
 * @Date: 2024-07-03 16:54:05
 * @LastEditors: zhouhua zhouh@hsmap.com
 * @LastEditTime: 2024-07-04 15:18:49
 * @FilePath: \fd-fireframework-web\src\views\bMap\modules\tableInfo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    class="table_wrapper"
    v-show="circleParams"
    :style="{ transform: !isFull ? 'translateX(-100%)' : undefined }"
  >
    <div class="top_filter">
      <div class="tips">
        当前区域: {{ centerPointAddress?.address }}
        <span class="radius">{{ circleParams?.distance }}km以内</span>
      </div>
      <z-tiled-filters
        :min-expand-length="1"
        v-model:value="searchData"
        ref="tiled"
        :widgets-options="widgetsOptions"
        @search="handleSearch"
      />
    </div>
    <div class="table_content">
      <n-input-group class="search_input">
        <n-input v-model:value="companyName" clearable :style="{ width: '30%' }" />
        <n-button type="primary" @click="updateTabel">搜索</n-button>
      </n-input-group>
      <n-data-table
        :bottom-bordered="false"
        :columns="columns"
        :data="tableData.data"
        :loading="loading"
        :bordered="false"
      />
      <div style="display: flex; justify-content: end; margin-top: 24px">
        <n-pagination
          :page="tableParams.pageNo"
          :pafe-size="tableParams.pageSize"
          :item-count="tableData.total"
          show-size-picker
          show-quick-jumper
          simple
          :page-sizes="[10]"
          :on-update:page="handleUpdatePage"
          :on-update:page-size="handleUpdatePageSize"
        >
          <template #prefix>共{{ tableData.total }}条数据</template>
          <template #suffix>页</template>
        </n-pagination>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DataTableColumn } from 'naive-ui'
import { isFull, circleParams, currentDatas, centerPointAddress } from '../model'
import { useTable } from '@/hooks'
import { Data } from '../types'
import { postCompanyCompanyInfoPageList } from '@/api/views_bMap'
import { data1 } from '../mock'

/** 筛选参数 */
const searchData = ref<any>({})
/** 筛选项 */
const widgetsOptions = ref<Array<any>>([
  {
    title: '基本信息',
    multiLevel: true,
    data: [
      // {
      //   name: '国标行业',
      //   key: 'level-1',
      //   children: [{ name: '全部', value: undefined }]
      // },
      {
        name: '成立年限',
        multiple: false,
        key: 'foundDate',
        children: [
          { name: '半年内', value: '|100' },
          { name: '1年内', value: '100|500' },
          { name: '1-3年内', value: '500|1000' },
          { name: '3-5年内', value: '1000|3000' },
          { name: '5-10年内', value: '3000|5000' },
          { name: '10年以上', value: '5000|' }
        ]
      },
      {
        name: '注册资本',
        key: 'regCapital',
        children: [
          { name: '100万以内', value: '|100' },
          { name: '100-200万', value: '100|500' },
          { name: '200-500万', value: '500|1000' },
          { name: '500-1000万', value: '1000|3000' },
          { name: '1000-5000万', value: '3000|5000' },
          { name: '5000万以上', value: '5000|' }
        ]
      }
      // {
      //   name: '登记状态',
      //   key: 'level-5',
      //   children: [{ name: '全部', value: undefined }]
      // },
      // {
      //   name: '公司类型',
      //   key: 'level-6',
      //   children: [{ name: '全部', value: undefined }]
      // }
    ]
  },
  {
    title: '经营状况',
    multiLevel: true,
    data: [
      {
        name: '联系电话',
        key: 'level-1',
        children: [
          { name: '有', value: undefined },
          { name: '无', value: undefined }
        ]
      },
      {
        name: '手机号码',
        key: 'level-2',
        children: [
          { name: '有', value: undefined },
          { name: '无', value: undefined }
        ]
      },
      {
        name: '联系邮箱',
        key: 'level-3',
        children: [
          { name: '有', value: undefined },
          { name: '无', value: undefined }
        ]
      },
      {
        name: '实缴资本',
        key: 'level-4-2',
        children: [
          { name: '100万以内', value: '|100' },
          { name: '100-200万', value: '100|500' },
          { name: '200-500万', value: '500|1000' },
          { name: '500-1000万', value: '1000|3000' },
          { name: '1000-5000万', value: '3000|5000' },
          { name: '5000万以上', value: '5000|' }
        ]
      },
      {
        name: '参保人数',
        key: 'level-4',
        children: [
          { name: '50人以下', value: '|100' },
          { name: '50-100', value: '100|500' },
          { name: '100-500人', value: '500|1000' },
          { name: '500-1000人', value: '1000|3000' },
          { name: '1000-5000人', value: '3000|5000' },
          { name: '5000-10000人', value: '3000|5000' },
          { name: '10000人以上', value: '5000|' }
        ]
      },
      {
        name: '科技型企业',
        key: 'level-5',
        children: [
          { name: '专精特新企业', value: '|100' },
          { name: '高新技术企业', value: '|100' },
          { name: '科技型中小企业', value: '|100' },
          { name: '独角兽企业', value: '|100' },
          { name: '企业技术中心', value: '|100' },
          { name: '专精特新小巨人企业', value: '|100' },
          { name: '创新型中小企业', value: '|100' },
          { name: '瞪羚企业', value: '|100' },
          { name: '单项冠军企业', value: '|100' },
          { name: '技术创新示范企业', value: '|100' },
          { name: '雏鹰企业', value: '|100' },
          { name: '技术先进型服务企业', value: '|100' },
          { name: '国家知识产权示范企业', value: '|100' },
          { name: '隐形冠军企业', value: '|100' },
          { name: '国家知识产权优势企业', value: '|100' }
        ]
      },
      {
        name: '纳税信用',
        key: 'level-6',
        children: [
          { name: 'A级', value: undefined },
          { name: '其他', value: undefined }
        ]
      }
    ]
  },
  {
    title: '知识产权',
    multiLevel: true,
    data: [
      {
        name: '专利信息',
        key: 'level-1',
        children: [
          { name: '有', value: undefined },
          { name: '无', value: undefined }
        ]
      },
      {
        name: '专利类型',
        key: 'level-3',
        children: [
          { name: '发明公布', value: '|100' },
          { name: '发明授权', value: '|100' },
          { name: '实用新型', value: '|100' },
          { name: '外观设计', value: '|100' }
        ]
      }
    ]
  }
])
/** 关键字 */
const companyName = ref<string>()
/** 查询方法 */
function handleSearch(result: { [key: string]: any }) {
  console.log('222', result)
  // zingUi的这个组件初始时会自动调用，判断一下没有绘制过圆就不调用
  if (!circleParams.value) return
  updateTabel()
}

// 表格相关数据、方法
const { tableData, tableParams, handleUpdatePage, handleUpdatePageSize } = useTable<Data>()
/** 表格加载状态 */
const loading = ref(false)
/** 表格项 */
const columns = ref<Array<DataTableColumn>>([
  {
    title: '序号',
    width: 80,
    key: '1',
    render(_, index: number) {
      const { pageNo, pageSize } = tableParams.value
      return h('span', index + 1 + (pageNo - 1) * pageSize)
    }
  },
  {
    title: '企业名称',
    width: 300,
    ellipsis: {
      lineClamp: 2,
      tooltip: true
    },
    key: 'companyName'
  },
  {
    title: '登记状态',
    key: 'businessState',
    ellipsis: {
      lineClamp: 2,
      tooltip: true
    }
  },
  {
    title: '法定代表人',
    key: 'legalPerson',
    ellipsis: {
      lineClamp: 2,
      tooltip: true
    }
  },
  {
    title: '注册资本/万元',
    width: 120,
    key: 'regCapital',
    ellipsis: {
      lineClamp: 2,
      tooltip: true
    }
  },
  {
    title: '成立日期',
    key: 'foundDate',
    ellipsis: {
      lineClamp: 2,
      tooltip: true
    }
  }
])
/** 更新表格 */
function updateTabel() {
  const { pageNo } = tableParams.value
  // 页码为1,主动调用函数
  if (pageNo === 1) {
    getData()
  } else {
    // 否则更改页码，触发监听器调用
    handleUpdatePage(1)
  }
}
/**
 * @description 获取表格数据
 */
async function getData() {
  loading.value = true
  // const { data } = await postCompanyCompanyInfoPageList({
  //   ...tableParams.value,
  //   ...circleParams.value,
  //   companyName: companyName.value
  // })
  const data = data1
  // tableData.value.data = data.list || []
  // currentDatas.value = data.list || []
  // tableData.value.total = data.total
  // loading.value = false
}

// 监听圆形绘制成功后，获取数据
watch(
  () => circleParams.value,
  (val) => {
    if (val) {
      updateTabel()
    } else {
      tableData.value.data = []
      currentDatas.value = []
      tableData.value.total = 0
    }
  },
  {
    deep: true
  }
)
// 页码更新，重新获取函数
watch(
  () => tableParams.value.pageNo,
  () => {
    getData()
  }
)
</script>

<style lang="less" scoped>
.table_wrapper {
  display: flex;
  flex-direction: column;
  width: 50%;

  position: fixed;
  right: -50%;

  height: 100%;
  overflow-y: auto;
  padding: 24px;
  background: #fff;
  transition: transform 0.3s;

  .top_filter {
    font-size: 14px;
    font-weight: bold;

    .tips {
      color: #333333;
    }
    .radius {
      color: #f04040;
    }
  }

  .table_content {
    margin-top: 16px;
    flex: 1;

    .search_input {
      margin-bottom: 12px;
    }
  }
}
</style>
